<template>
  <div class="index">
    <div class="search">
      <!-- v-model="input3" -->
      <el-input placeholder="请输入内容" v-model="input1" class="input-with-select" id="city">
        <el-button slot="append" icon="el-icon-search" @click="find"></el-button>
      </el-input>
    </div>
    <h3>输入城市查询天气</h3>
    <div class="pic" id="charts"></div>
    <div class="pic" id="charts1"></div>
  </div>
</template>
<script type="text/javascript">
import axios from "@/utils/axios";
import $ from "jquery";
export default {
  data() {
    return {
      time: null,
      high: null,
      low: null,
      title: null,
      lineChart1: null,
      lineChart2: null,
      time1: null,
      temp1: null,
      input1: null
    };
  },
  // 钩子函数 生命周期。在组件创建好之后执行的函数
  created() {},
  // 钩子函数，结点渲染完毕之后执行的函数
  mounted() {
    // axios.get("/weather" ,{params: {
    //   city=北京,
    //   appKey="666c4a42b8956455b9fba9ace6077b71"
    // }})
    window.onresize = this.resize;
  },
  methods: {
    resize() {
      if (this.lineChart1) {
        this.lineChart1.resize();
      }
      if (this.lineChart2) {
        this.lineChart2.resize();
      }
    },
    find() {
      var myChart = echarts.init(document.getElementById("charts"));
      var myChart2 = echarts.init(document.getElementById("charts1"));
      this.lineChart1 = myChart;
      this.lineChart2 = myChart2;
      var findcity = this.input1;
      console.log(findcity);
      axios
        .get(
          "/weather?appKey=666c4a42b8956455b9fba9ace6077b71&city=" + findcity
        )
        .then(res => {
          var res = JSON.parse(res.data.data).result;
          var daily = res.result.daily;
          var hourly = res.result.hourly;
          this.time = daily.map(function(item) {
            return item.date;
          });
          this.high = daily.map(function(item) {
            return item.day.temphigh;
          });
          this.low = daily.map(function(item) {
            return item.night.templow;
          });
          this.time1 = hourly.map(function(item) {
            return item.time;
          });
          this.temp1 = hourly.map(function(item) {
            return item.temp;
          });
          myChart.setOption(
            this.charts(findcity, this.time, this.high, this.low)
          );
          myChart2.setOption(this.charts1(this.time1, this.temp1));
          $("h3").text(`${findcity}的七天天气预报`);
          console.log(res);
          console.log(daily);
          console.log(this.time);
        })
        .catch(err => {
          this.notfind();
          console.log(err, "++++++++++++");
        });
      // 绘图
    },
    // 折线图
    charts(title, time, high, low) {
      console.log(time, high, low);
      var option = {
        title: {
          text: title
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["最低温度", "最高温度"],
          textStyle: {
            color: "#fff",
            fontSize: 16
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: time,
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          }
        },
        series: [
          {
            name: "最高温度",
            type: "line",

            data: high,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "red" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#FF8C69" // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            },
            lineStyle: {
              width: 5
            }
          },
          {
            name: "最低温度",
            type: "line",
            data: low,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "blue" // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#B0E2FF" // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            },
            lineStyle: {
              width: 5
            }
          }
        ]
      };

      return option;
    },
    charts1(time1, temp1) {
      var option = {
        xAxis: {
          type: "category",
          data: time1,
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          }
        },
        series: [
          {
            data: temp1,
            type: "bar"
          }
        ],
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "white" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#8EE5EE" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      };
      return option;
    },
    notfind() {
      this.$alert("没有找到该城市信息，请确认是否输入正确", "出错了！", {
        confirmButtonText: "确定"
        // callback: action => {
        //   this.$message({
        //     type: 'info',
        //     message: `action: ${ action }`
        //   });
        // }
      });
    }
  }
};
</script>
<style scope>
.index {
  height: calc(100vh - 50px);
  background-color: #23262f;
}
h3 {
  margin-left: 10px;
  color: white;
}
.pic {
  width: 45%;
  height: 70%;
  float: left;
  margin-left: 20px;
  /* border-style: solid;
  border-color: wheat; */
}
.search {
  width: 20%;
}
</style>